<template>
  <div class="">
    <div class="head-container">
      <el-input
        v-model="eventTypeName"
        placeholder="请输入标题名称"
        clearable
        size="mini"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"/>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-tree :data="platformHelpList"
               node-key="id"
               ref="tree" highlight-current
               :props="defaultProps"
               :default-expanded-keys="[1,2]"
               :filter-node-method="filterNode"
               @node-click="handleCheckChange">
        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => edit(node)">编辑</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
  import { treeSelect } from "@/api/module/help";
  import TreeSelect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "index",
    components: {
      TreeSelect
    },
    data() {
      return {
        platformHelpList: null,
        chooseData:null,
        eventTypeName:'',
        defaultProps: {
          children: "children",
          label: "label"
        },
      }
    },
    watch: {
      // 根据名称筛选事件类型树
      eventTypeName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getTreeSelect()
    },
    methods: {
      /** 查询组织机构下拉树结构 */
      getTreeSelect() {
        treeSelect().then(response => {
          console.log('response.data',response.data);
          this.platformHelpList = response.data;
        });
      },
      handleCheckChange(data){
        this.chooseData = data;
        this.$emit('handleNodeClick',this.chooseData);
      },
      filterNode(value,data){
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      edit(data){
        console.log('edit data',data);
        this.$emit('handleEditClick',data);
      },
      remove(node,data){
        console.log('remove node',node);
        console.log('remove data',data);
        this.$emit('handleRemoveClick',data);
      }
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
